<!DOCTYPE HTML>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="../scripts/report/highcharts.js"></script>
        <script src="../scripts/report/exporting.js"></script>


        <script type="text/javascript" language="javascript">
            var open_cur = 0;
            $j = jQuery.noConflict();
          
           
            var chart;
            $j(document).ready(function() {
                    
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        margin: [ 50, 50, 100, 80],
                          height:600,
                           backgroundColor: {
                            linearGradient: [0, 0, 500, 500],
                            stops: [
                                [0, 'rgb(255, 255, 255)'],
                                [1, 'rgb(139, 174, 191)']
                            ]
                        }
                    },
                    title: {
                        text: 'THỐNG KÊ TRẠNG THÁI KHÁCH HÀNG'
                    },
                    xAxis: {
                        categories: [
            <c:forEach items="${ReportBean.reportN100R3}" var="item">
                                '<c:out value="${item.pro}"/>',
                                
                               
            </c:forEach>
                            ],
                            labels: {
                                rotation: -34,
                                align: 'right',
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min:0,
                            title: {
                                text: 'SỐ LƯỢNG'
                            }
                        },
                        legend: {
                            enabled:false
                        },
                        tooltip: {
                            formatter: function() {
                                return '<b>'+ this.x +'</b><br/>'+
                                    'Ti le: '+ Highcharts.numberFormat(this.y, 1) +
                                    ' số lượng';
                            }
                        },
                        series: [{
                                name: 'Population',
                                data: [
            <c:forEach items="${ReportBean.reportN100R3}" var="itemm">
                <c:out value="${itemm.sl}"/>,
                                
                               
            </c:forEach>
                                ],
                                dataLabels: {
                                    enabled: false,
                                    rotation: -90,
                                    color: '#FFFFFF',
                                    align: 'right',
                                    x: 40,
                                    y: 100,
                                    style: {
                                        fontSize: '13px',
                                        fontFamily: 'Verdana, sans-serif'
                                    }
                                }
                            }]
                    });
               
    
                });
        </script>
        <style type="text/css">
            .container-chart{
                min-width: 400px; height: auto; margin: 0 auto;

            }
        </style>
    </head>
    <body>
        
                    <div id="container" class="container-chart" style=""></div>
                



    </body>
</html>
